<!DOCTYPE html>
<html>
  <head>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
      google.load("jquery", "1",{uncompressed:true} );  
    </script>
      <link rel="stylesheet" href="http://jqueryjs.googlecode.com/svn/trunk/qunit/testsuite.css" type="text/css" media="screen" />
  	
    <script src="vid_skim.js" type="text/javascript"></script>
    
    <title></title>
    <script>
    data = {
      "divisions":{
        "ib": {
          "color": "#316734",
          "color": "#316734",
          "entries": [
            {
              "title": "Purchases",
              "range": ["00:01:17", "00:01:55"], 
              "transcript":"fsdffs ",
            },
            {
              "title": "Purchases2",
              "range": ["00:01:55", "00:02:30"], 
              "transcript":"hgkl ",
            }
          ]
        }
      }
    }
    </script>
    <script>
    var params = { allowScriptAccess: "always" };
    var atts = { id: "ytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/UWRyj5cHIQA&enablejsapi=1", 
                     "ytapiplayer", "1", "1", "8", null, null, params, atts);
  var trans = new Transcript('#timeline', '#trans', '#extra', '#vid-nav','#vid-tabs', '#rail', '#viewer', window.location);
   
    trans.setData(data, "ib");                 


    
    
    
    function onYouTubePlayerReady(playerId) {

       var ytplayer = document.getElementById('ytplayer'); 

       ytplayer.addEventListener("onStateChange", "onYouTubePlayerStateChange");

       trans.setPlayer(ytplayer);
       trans.seek(trans.hashSeconds);
       trans.setBounds(176);
       setInterval(updateytplayerInfo, 250);  
       trans.initted = true;
       test_yt();
     }


     function updateytplayerInfo() {
       trans.draw(trans.player.getCurrentTime());
     }
    
    
    
    function test_yt () {
      test("test parsing data", function() {
        equals(77, data.divisions.ib.entries[0].range[0], "");
      });
      test("seeking the player", function() {
        trans.seek(84);
        trans.stop;
        equals(84, trans.player.getCurrentTime());
      });
      test("looking up seconds from the data",function() {
        equals(trans.lookup(80)[0].title, "Purchases");
      });
    }
    
    </script>
    
  </head>
  <body>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/qunit/testrunner.js"></script>
    
     <h1>
      Transcript Test
     </h1>
     

     <h2 id="banner"></h2>
     <h2 id="userAgent"></h2>

     <ol id="tests"></ol>
     <div id="main"></div>
      
      
     <div id="extra2">
       <h2 id="title"></h2>
        <div id="viewer" class="clearfix">
        	<div id="timeline">
        	  <div class="scrubber"></div>
        	  <div class="position"></div>
          </div>

          <div id="player_container">
            <div id="ytapiplayer">
              You need Flash player 8+ and JavaScript enabled to view this video.
            </div>
          </div>
          <div id="trans">
            <div id="extra"></div>
          </div>
     </div>
  </body>
</html>
